<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="8">
                <div class="item">
                    <div class="title">学生姓名:</div>
                    <div class="content">{{studentInfo.studentName}}</div>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="item">
                    <div class="title">学生学号:</div>
                    <div class="content">{{studentInfo.studentNo}}</div>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="item">
                    <div class="title">学生状态:</div>
                    <div class="content">{{status[studentInfo.status]}}</div>
                </div>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="8">
                <div class="item">
                    <div class="title">性别:</div>
                    <div class="content">{{gender[studentInfo.gender]}}</div>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="item">
                    <div class="title">生日:</div>
                    <div class="content">{{studentInfo.birthday}}</div>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="item">
                    <div class="title">校区:</div>
                    <div class="content">{{studentInfo.schoolName}}</div>
                </div>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="8">
                <div class="item">
                    <div class="title">年级:</div>
                    <div class="content">{{studentInfo.gradeName}}</div>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="item">
                    <div class="title">就读学校:</div>
                    <div class="content">{{studentInfo.realSchoolName}}</div>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="item">
                    <div class="title">登录账户:</div>
                    <div class="content">{{studentInfo.mobile}}</div>
                </div>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="8">
                <div class="item">
                    <div class="title">老学员:</div>
                    <div class="content">{{isOld[studentInfo.isOld]}}</div>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="item">
                    <div class="title">考试分数:</div>
                    <div class="content">{{studentInfo.score}}</div>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="item">
                    <div class="title">创建人:</div>
                    <div class="content">{{studentInfo.createUserName}}</div>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="item">
                    <div class="title">创建时间:</div>
                    <div class="content">{{studentInfo.gmtCreate}}</div>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="item">
                    <div class="title">更新人:</div>
                    <div class="content">{{studentInfo.modifiedUserName}}</div>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="item">
                    <div class="title">更新时间:</div>
                    <div class="content">{{studentInfo.gmtModified}}</div>
                </div>
            </el-col>
        </el-row>
        <div class="select-title">已选班级</div>
        <el-table
      :data="classList"
      border
      style="width: 100%;">
      <el-table-column
        type="index"
        header-align="center"
        align="center"
        label="序号"
        width="50">
        
      </el-table-column>
      <el-table-column
        prop="name"
        header-align="center"
        align="center"
        label="班级名称"
        width="200"
        show-overflow-tooltip>
        
      </el-table-column>
      <el-table-column
        prop="schoolName"
        header-align="center"
        align="center"
        label="校区">
      </el-table-column>
      <el-table-column
        prop="teacherName"
        header-align="center"
        align="center"
        label="教师">
      </el-table-column>
      <el-table-column
        prop="gradeName"
        header-align="center"
        align="center"
        label="年级">
      </el-table-column>
      
      
    </el-table>
    </div>
</template>
<script>
export default {
    data () {
        return {
            studentInfo: '',
            classList: [],
            status:{
                '0': '正常',
                '1': '离班'
            },
            gender: {
                '1': '女',
                '2': '男'
            },
            isOld:{
                '0': '否',
                '1': '是'
            }
        }
    },
    methods:{
        getStudentInfo(studentNo) {
            this.$http({
              url: this.$http.adornUrl(`/sys/edustudent/info/${studentNo}`),
              method: 'get',
              params: this.$http.adornParams({'studentNo':studentNo})
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.studentInfo = data.eduStudent;
         
              }
            })
        },
        
        getClassByStudentNo(studentNo) {
            this.$http({
              url: this.$http.adornUrl(`/sys/educlass/${studentNo}/class`),
              method: 'get',
              params: this.$http.adornParams()
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.classList = data.page.list;
         
              }
            })
        }
    },
    created: function () {

        let studentNo = this.$route.query.studentNo;
        this.getStudentInfo(studentNo);
        this.getClassByStudentNo(studentNo);
    }
}
</script>
<style scoped>
.item{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin:  20px;
}
.item .title {
    width: 100px;
    color: #777;
}
.item .content {
    flex: 1;
    color: #454545;
}
.select-title{
    font-size: 14px;
    font-weight: 700;
    color: #454545;
    margin: 10px 0;
}
</style>